<template>
    <div class="class-tixing">
        <a-modal
            v-model="modal2Visible"
            title="提示"
            centered>
            <div class="上课提醒"></div>
            <p style="text-align: center;">课程已经开始啦，点击进入教师开始上课吧～</p>
            <div class="kecheng" v-for="(item, index) in remindCourseList" :key="index" @click="chooseCourse(item, index)" :class="courseId === item.course_id ? 'active' : ''">
                <img :src="item.pic" alt="">
                <div class="kctext">
                    <h3>{{ item.course_name }}</h3>
                    <p>课包:<span>{{ item.plan_name }}</span></p>
                    <p>班级:<span>{{ item.class_name }}</span></p>
                    <p>老师:<span>{{ item.teacher_name }}</span></p>
                </div>
            </div>
            <template slot="footer">
                <div class="jrkc" @click="playCourse">
                    <img src="@/assets/icons/bofang.png" alt="">
                    <span>进入课程</span>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            modal2Visible: false,
            remindCourseList: [],
            courseId: '',
            courseName: '',
            planId: '',
        };
    },
    mounted() {
        this.getClassRemind();
    },
    methods: {
        async getClassRemind() {
            const res = await this.$request.get('api/edu/class_remind');
            if (res.code === 1) {
                if (res.data.length === 0) {
                    this.modal2Visible = false;
                } else {
                    this.modal2Visible = true;
                    this.remindCourseList = res.data;
                    this.courseId = res.data[0].course_id;
                    this.courseName = res.data[0].course_name;
                    this.planId = res.data[0].plan_id;
                }
                // console.log(res, 'res===');
            } else {
                this.$message.error(res.msg);
                this.remindCourseList = [];
            }
        },
        chooseCourse (item) {
            this.courseId = item.course_id;
            this.courseName = item.course_name;
            this.planId = item.plan_id;
        },
        playCourse() {
            this.modal2Visible = false;
            this.$router.push({
                name: 'coursePlay',
                query: {
                    id: this.courseId,
                    name: this.courseName,
                    plan_id: this.planId,
                },
            });
        }
    },
};
</script>
<style lang="less" scoped>
/deep/ .ant-modal-content{
    width: 816px;
    // height: 494px;
    background: linear-gradient( 180deg, #DFF1FF 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
}
/deep/ .ant-modal-header{
    background: none;
    border-bottom: none;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
}
/deep/ .ant-modal-footer{
    text-align: center;
    border-top: none;
}
.kecheng{
    display: flex;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0,69,207,0.08);
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
    img{
        width: 288px;
        height: 216px;
        margin-right: 20px;
    }
    .kctext{
        h3{
            font-weight: 500;
            font-size: 22px;
            color: #000000;
        }
        p{
            font-weight: 500;
            font-size: 15px;
            color: #000000;
            span{
                font-weight: 400;
                font-size: 13px;
                color: #000000;
            }
        }
    }
    &.active{
        border: 2px solid #3881F8;
        cursor: pointer;
    }
}
.jrkc{
    width: 140px;
    height: 40px;
    margin: 30px auto;
    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img{
        width: 20px;
        height: 20px;
    }
    span{
        font-weight: 400;
        font-size: 17px;
        color: #FFFFFF;
        margin-left: 8px;
    }
}
</style>